import { useState, useCallback } from "react";
import { useNavigate } from "react-router";
import { Menu } from "antd";
import { items } from "./columns";

export function Router() {
	const navigate = useNavigate();

	const [selectedKeys, setSelectedKeys] = useState<string[]>(["/list"]);

	const onSelect = useCallback(({ key }: { key: string }) => {
		setSelectedKeys([key]);
		navigate(key);
	}, []);

	return (
		<Menu
			onSelect={onSelect}
			selectedKeys={selectedKeys}
			mode="horizontal"
			items={items}
		/>
	);
}
